
/**
 * @desc 商品，新增/修改弹框
 * @author yd_zhaorongjun
 */
<template>
  <div v-loading="loading" class="editGoods">
    <el-form ref="Api_POST_ProductInput" class="gl_form_mini" :model="Api_POST_ProductInput" :rules="Api_POST_ProductInput_Rules" label-width="140px">
      <el-row :gutter="20">
        <el-col :span="24" />
      </el-row>
      <div class="box_card">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="商品标题" prop="name">
              <el-input v-model="Api_POST_ProductInput.name" placeholder="请输入" maxlength="50" type="text" size="small" style="width:470px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" class="form_item" style="height:auto">
            <div class="img_box_left">
              <el-form-item label="商品主图" prop="images">
                <!-- 实现图片拖拽功能 -->
                <div style="display:inline-block">
                  <div
                    v-for="(item, index) in Api_POST_ProductInput.images"
                    :key="index"
                    class="item"
                    style="display: inline-block"
                    draggable="true"
                    @dragenter="handleDragEnter($event, item)"
                    @dragstart="handleDragStart($event, item)"
                    @dragover.prevent="handleDragOver($event, item)"
                    @dragend="handleDragEnd($event, item)"
                  >
                    <div style="margin-top: 10px;margin-right:10px">
                      <el-input v-show="false" v-model.trim="item.imageUrl" />
                      <div class="upload_game_img" style="position: relative;">
                        <img class="show_img" :src="getStaticFileUrl(item.imageUrl)">
                        <!-- <el-image
                          class="upload_game_img_hover_preview"
                          :src="getStaticFileUrl(item.imageUrl)"
                          style="position: absolute;left: 0;
                                left: 22px;
                                top: 42px;
                                width: 20px;
                                height: 20px;
                                "
                          :preview-src-list="[getStaticFileUrl(item.imageUrl)]"
                          @click.stop="clickClose"
                        /> -->
                        <span class="upload_game_img_hover">
                          <span>
                            <i class="el-icon-zoom-in" @click="previewImg(item.imageUrl)" />
                          </span>
                          <span>
                            <i class="el-icon-delete" @click="deleteUploadImg(index)" />
                          </span>
                          <p class="changgeIMgBtn" @click="openPhotoCropper(index)">点击替换</p>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="Api_POST_ProductInput.images.length <= 20" class="photoCropper img_box" style="margin-top:10px">
                  <photo-cropper-dialog
                    ref="photoCropper"
                    auto-crop-width="400px"
                    auto-crop-height="400px"
                    :fixed-number="[400, 400]"
                    :enlarge="1"
                    @photoCropperSave="photoCropperSave"
                  />
                  <div class="upload_game_img" @click="openPhotoCropper()">
                    <i class="el-icon-plus" />
                  </div>
                </div>
              </el-form-item>
            </div>
            <div :span="14" class="form_item img_box_right" style="height:auto">
              <p class="img_text">第一张图片将作为商品主图必须上传,支持同时上传多张图片,多张图片 之间可随意调整位置;</p>
              <p class="img_text">支持jpg、gif、png格式，建议使用尺寸800x800 px 以上、大小不超 过1M的正方形图片;</p>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" class="form_item" style="height:auto">
            <el-form-item label="商品属性">
              <div v-for="(item, index) in Api_POST_ProductInput.properties" :key="index" class="form_input_box gl_mb_5">
                <el-input v-model="item.name" :class="item.name === '' && isRedBorder_properties ? 'redBorder': ''" class="form_input" placeholder="请输入属性名称" type="text" size="small" @change="changeProperties(item, index)" />
                <el-input v-model="item.value" :class="item.value === '' && isRedBorder_properties ? 'redBorder': ''" class="form_input" placeholder="请输入属性值" type="text" size="small" />
                <template>
                  <i class="preview_bottom el-icon-bottom gl_ml_10 gl_mr_10" :class="index !== Api_POST_ProductInput.properties.length - 1 ? '' : 'disable_move'" @click="setSortOrderProperties(index, 'down')" />
                  <i class="preview_top el-icon-top gl_mr_15 " :class="index !== 0 ? '' : 'disable_move'" @click="setSortOrderProperties(index, 'up')" />
                  <el-button type="text" style="color:#FF3434" size="mini" @click="deletProperties(index)">删除</el-button>
                </template>
              </div>
              <el-button v-if="Api_POST_ProductInput.properties.length <= 10" type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addProperties()">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="box_card">
        <el-row :gutter="20">
          <el-col :span="24" class="form_item" style="height:auto">
            <el-form-item label="颜色属性">
              <div v-for="(item, index) in Api_POST_ProductInput.colors" :key="index" class="form_input_box gl_mb_5">
                <el-input v-model="item.name" :class="item.name === '' && isRedBorder_colors ? 'redBorder': ''" class="form_input" placeholder="请输入颜色名称" type="text" maxlength="10" size="small" @change="changeColors(item, index)" />
                <el-input v-model="item.comment" class="form_input" placeholder="备注(如说明或补充)" type="text" size="small" />
                <template>
                  <i class="preview_bottom el-icon-bottom gl_ml_10 gl_mr_10" :class="index !== Api_POST_ProductInput.colors.length - 1 ? '' : 'disable_move'" @click="setSortOrder(item, index, 'down')" />
                  <i class="preview_top el-icon-top gl_mr_15 " :class="index !== 0 ? '' : 'disable_move'" @click="setSortOrder(item, index, 'up')" />
                  <el-button type="text" style="color:#FF3434" size="mini" @click="deletColors(item,index)">删除</el-button>
                </template>
              </div>
              <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addColors()">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" class="form_item" style="height:auto">
            <el-form-item label="尺码规格">
              <el-input v-model="sizeName" placeholder="请输入自定义值" type="text" maxlength="10" size="small" style="width:470px" />
              <div style="margin-top:5px">
                <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addSize()">新增</el-button>
              </div>
              <el-checkbox-group v-model="checkList" class="gl_mt_10" @change="changeCheckList">
                <div v-for="(item, index) in Api_POST_ProductInput.sizes" :key="index" class="checkbox_sizes">
                  <el-checkbox :label="item.name" style="font-size:16px" />
                  <el-button type="text" style="color:#108ee9;margin-left:10px;vertical-align: super;" size="mini" @click="editSize(item, index)">编辑</el-button>
                  <el-button type="text" style="color:#FF3434;vertical-align: super;" size="mini" @click="deletSize(item, index)">删除</el-button>
                </div>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="checkList.length> 0 || Api_POST_ProductInput.colors.length > 0" :gutter="20">
          <el-col :span="24" class="form_item goods_table" style="height:auto">
            <el-table v-loading="tableLoading" :data="tableData" :span-method="objectSpanMethod" class="goods_table gl_table_noBorder" size="mini" style="width: 80%;margin-left:119px;padding-bottom: 30px;">
              <el-table-column
                label=""
                width="30"
              />
              <el-table-column
                v-if="Api_POST_ProductInput.colors.length > 0"
                label="颜色"
                width="200"
              >
                <template slot-scope="{row}">
                  {{ row.colorName || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                v-if="checkList.length > 0"
                label="尺码"
                width="200"
              >
                <template slot-scope="{row}">
                  {{ row.sizeName }}
                </template>
              </el-table-column>
              <el-table-column
                v-if="Api_POST_ProductInput.colors.length > 0"
                label="颜色图片"
                width="180"
              >
                <template slot-scope="{row, $index}">
                  <div style="display:inline-block">
                    <div class="upload_game_img">
                      <el-image v-if="row.imageUrl" class="show_img" :src="getStaticFileUrl(row.imageUrl)" :preview-src-list="[getStaticFileUrl(row.imageUrl)]" @click.stop="clickClose" />
                      <i v-else class="el-icon-plus" />
                    </div>
                  </div>

                  <div v-if="row.imageUrl" style="display:inline-block;margin-left:10px">
                    <el-button type="text" class="addColorPhoto" @click="openColorPhotoCropper(row.imageUrl, $index)">替换</el-button>
                    <el-button type="text" class="addColorPhoto" style="color:#FF3434" @click="deleteColorPhotoCropper($index)">删除</el-button>
                  </div>
                  <el-button v-else type="text" class="addColorPhoto" @click="openColorPhotoCropper(row.imageUrl, $index)">选择图片</el-button>
                </template>
              </el-table-column>
              <el-table-column
                label="销售价格(元)"
                align="center"
              >
                <template slot="header">
                  <span class="star">*</span>
                  <span>销售价格(元)</span>
                </template>
                <template slot-scope="{row}">
                  <el-input-number v-model="row.price" :controls="false" :precision="0" placeholder="请输入" size="mini" controls-position="right" :min="0" :max="999999" style="width: 50%;padding-left:5px;padding-right:5px;" />
                </template>
              </el-table-column>
              <el-table-column
                label="库存数量"
                align="center"
              >
                <template slot="header">
                  <span class="star">*</span>
                  <span>库存数量</span>
                </template>
                <template slot-scope="{row}">
                  <el-input-number v-model="row.count" :controls="false" :precision="0" placeholder="请输入" size="mini" controls-position="right" :min="0" :max="999999" style="width: 50%;padding-left:5px;padding-right:5px" />
                </template>
              </el-table-column>
            </el-table>
            <photo-cropper-dialog
              ref="colorPhotoCropper"
              auto-crop-width="300px"
              auto-crop-height="300px"
              :fixed-number="[166, 200]"
              :enlarge="1"
              @photoCropperSave="colorPhotoCropperSave"
            />
          </el-col>
        </el-row>

      </div>
      <div class="box_card">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item v-if="tableData.length>0" label="销售价格 (元)">
              <!-- 只能输入数字，和小数点 -->
              <el-input-number v-model="Api_POST_ProductInput.price" class="input_number_left" :controls="false" :precision="2" disabled placeholder="请输入" size="small" controls-position="right" :min="0" style="width: 470px;" />
              <!-- <el-input v-model="Api_POST_ProductInput.price" oninput="value=value.replace(/[^0-9.]/g,'')" disabled placeholder="请输入" type="text" size="small" style="width:470px" /> -->
            </el-form-item>
            <el-form-item v-else label="销售价格 (元)" prop="price">
              <el-input-number
                v-model="Api_POST_ProductInput.price"
                class="input_number_left"
                :controls="false"
                :precision="2"
                placeholder="请输入"
                size="small"
                controls-position="right"
                :min="0"
                :max="999999"
                style="width: 470px;"
              />
              <!-- <el-input v-model="Api_POST_ProductInput.price" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入" type="text" size="small" style="width:470px" /> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item v-if="tableData.length>0" label="库存数量">
              <el-input-number
                v-model="Api_POST_ProductInput.count"
                class="input_number_left"
                :controls="false"
                :precision="0"
                disabled
                placeholder="请输入"
                size="small"
                controls-position="right"
                :min="0"
                style="width: 470px;"
              />
              <!-- <el-input v-model="Api_POST_ProductInput.count" oninput="value=value.replace(/[^\d]/g,'')" disabled placeholder="请输入" type="text" size="small" style="width:470px" /> -->
            </el-form-item>
            <el-form-item v-else label="库存数量" prop="count">
              <el-input-number
                v-model="Api_POST_ProductInput.count"
                class="input_number_left"
                :controls="false"
                :precision="0"
                placeholder="请输入"
                size="small"
                controls-position="right"
                :min="0"
                :max="999999"
                style="width: 470px;"
              />
              <!-- <el-input v-model="Api_POST_ProductInput.count" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入" type="text" size="small" style="width:470px" /> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="选择分组" prop="productGroupId">
              <el-select v-model="Api_POST_ProductInput.productGroupId" size="small" placeholder="请选择" style="width:470px">
                <el-option v-for="item in productGroup" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="是否上架" prop="productStatusCode">
              <el-radio-group v-model="Api_POST_ProductInput.productStatusCode">
                <el-radio label="OnShelf">立刻上架</el-radio>
                <el-radio label="InStorage">放入仓库</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="描述" prop="description" style="width:70%">
              <Tinymce v-model="Api_POST_ProductInput.description" :height="300" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <el-row style="margin-top:40px">
      <el-col :span="24" align="center">
        <el-button type="primary" :loading="saveGoodsLoading" style="margin-right:40px" @click="saveGoods()">发布</el-button>
        <el-button type="default" @click="goBack()">取消</el-button>
      </el-col>
    </el-row>

    <el-dialog
      title="修改规格尺寸"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="600px"
    >
      <el-scrollbar ref="scroll" v-loading="loading" wrap-class="scrollbar-wrapper gl_dialog_height">
        <el-form ref="editSizeFrom" class="gl_form_mini" :model="editSizeFrom" :rules="editSizeFrom_Rules" label-position="top" label-width="120px" style="padding:0 30px">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="修改规格" prop="name">
                <el-input v-model="editSizeFrom.name" placeholder="请输入" type="text" maxlength="10" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <!-- 取消按钮 -->
        <el-button size="mini" @click="dialogVisible = false">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" :loading="submitLoading" size="mini" @click="saveSize()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogVisible_img"
      :close-on-click-modal="true"
      width="40%"
    >
      <div style="text-align:center;padding: 20px;">
        <img :src="getStaticFileUrl(bigImg)" style="width:100%">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  Api_GET_MallProductGroupQO,
  SiSTKWMallCreateProductInput,
  Api_GET_MallProductIdQO
} from '@/lib/form/shoppingmall/swaggerForm';
import {
  api_GET_MallStoreCurrent,
  api_GET_MallProductGroup,
  api_GET_MallProductProductSizes,
  api_POST_MallProduct,
  api_PUT_MallProductId,
  api_GET_MallProductId
} from '@/extend/api/shoppingmallswaggerApi/app.js';
import photoCropperDialog from './photoCropperDialog';
import validator from '@/lib/validate/index.js';
import Tinymce from '@/components/Tinymce';
import { CopyData } from '@/lib';

export default {
  components: {
    photoCropperDialog,
    Tinymce
  },
  data() {
    return {
      dragging: null,
      Api_GET_MallProductGroupQO: new Api_GET_MallProductGroupQO(),
      Api_POST_ProductInput: new SiSTKWMallCreateProductInput(),
      Api_GET_MallProductIdQO: new Api_GET_MallProductIdQO(),
      editSizeFrom: {
        name: ''
      },
      Api_POST_ProductInput_Rules: {
        name: [
          validator.required('商品标题名称不能为空')
        ],
        price: [
          validator.required('销售价格不能为空')
        ],
        count: [
          validator.required('库存数量不能为空')
        ],
        productGroupId: [validator.required('请选择商品分组', 'change')],
        description: [
          validator.required('商品描述不能为空')
        ],
        images: [
          {
            type: 'array',
            required: true,
            validator(rule, value, callback) {
              callback(validator.checkArray(value, '商品主图不能为空'));
            },
            trigger: 'change'
          }
        ]
      },
      editSizeFrom_Rules: {
        name: [
          validator.required('修改的规格不能为空')
        ]
      },
      title: '',
      loading: false,
      tableLoading: false,
      submitLoading: false,
      saveGoodsLoading: false,
      dialogVisible: false,
      dialogVisible_img: false,
      bigImg: '',
      imagesIndex: 0,
      colorIndex: 0,
      sizeIndex: 0,
      oldSizeName: '',
      colorsSortOrder: 0,
      sizeName: '', // 自定义尺码
      type: '', // 弹框状态，是新增和是修改 new 是新增，edit是修改
      goodsId: '', // 编辑时候的id
      checkList: [],
      tableData: [],
      storeId: '',
      srcList_big: [],
      productGroup: [],
      oldCheckList: [],
      isSameColorName: false,
      isSamePropertiesName: false,
      isRedBorder_properties: false,
      isRedBorder_colors: false,
      indexNum: 0
    };
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.$refs['editSizeFrom'].resetFields();
        this.editSizeFrom.name = '';
      }
    }
  },
  created() {
    this.goodsId = this.$route.params.id;
    // this.getDictByType(['district']);
    // this.getDict();
    this.getMallStoreCurrent();
    if (this.goodsId) {
      this.getMallProductId();
    } else {
      this.Api_POST_ProductInput.productStatusCode = 'OnShelf';
      this.Api_POST_ProductInput.price = null;
      this.Api_POST_ProductInput.count = null;
      this.getMallProductProductSizes();
    }
  },
  methods: {
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    // 首先把div变成可以放置的元素，即重写dragenter/dragover
    handleDragOver(e) {
      e.dataTransfer.dropEffect = 'move';// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = 'move';// 为需要移动的元素设置dragstart事件
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.Api_POST_ProductInput.images];
      console.log(newItems);
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.Api_POST_ProductInput.images = newItems;
      console.log(this.Api_POST_ProductInput.images); // 这里是返回的图片的排序
    },

    // 获取当前用户店铺信息
    getMallStoreCurrent() {
      api_GET_MallStoreCurrent({ IncludeStatus: true }).then(res => {
        this.storeId = res.id || '';
        this.getMallProductGroup();
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取指定商品
    getMallProductId() {
      const _this = this;
      this.loading = true;
      this.Api_GET_MallProductIdQO.IncludeImages = true;
      this.Api_GET_MallProductIdQO.IncludeProperties = true;
      this.Api_GET_MallProductIdQO.IncludeColors = true;
      this.Api_GET_MallProductIdQO.IncludeSizes = true;
      this.Api_GET_MallProductIdQO.IncludeInventories = true;
      this.Api_GET_MallProductIdQO.IncludeGroup = true;
      this.Api_GET_MallProductIdQO.IncludeDescription = true;
      this.Api_GET_MallProductIdQO.properties = true;
      _this.checkList = [];
      this.tableData = [];
      api_GET_MallProductId(this.goodsId, this.Api_GET_MallProductIdQO).then(res => {
        this.Api_POST_ProductInput = res || {};
        _this.oldCheckList = [];
        this.Api_POST_ProductInput.price = this.Api_POST_ProductInput.price ? this.Api_POST_ProductInput.price / 100 : 0;
        this.Api_POST_ProductInput.colors.sort((a, b) => a.sortOrder - b.sortOrder);
        this.Api_POST_ProductInput.sizes.sort((a, b) => a.sortOrder - b.sortOrder);
        this.Api_POST_ProductInput.properties.sort((a, b) => a.sortOrder - b.sortOrder);
        this.Api_POST_ProductInput.sizes.filter(item => {
          if (item.isSelected) {
            _this.checkList.push(item.name);
            _this.oldCheckList.push(item.name);
          }
        });
        const _tableData = this.Api_POST_ProductInput.inventories;
        for (let i = 0; i < _tableData.length; i++) {
          const item = _tableData[i];
          for (let j = 0; j < this.Api_POST_ProductInput.colors.length; j++) {
            const jtem = this.Api_POST_ProductInput.colors[j];
            if (item.productColorId === jtem.id) {
              item.sortOrder = jtem.sortOrder;
              item.colorName = jtem.name;
              item.colorsSortOrder = jtem.sortOrder;
            }
          }
          for (let k = 0; k < this.Api_POST_ProductInput.sizes.length; k++) {
            const ktem = this.Api_POST_ProductInput.sizes[k];
            if (item.productSizeId === ktem.id) {
              item.sortOrder = (item.sortOrder || 0) + '' + ktem.sortOrder;
              item.sizeName = ktem.name;
            }
          }
        }
        _tableData.sort((a, b) => a.sortOrder - b.sortOrder);
        if (_tableData.length > 0) {
          for (let i = 0; i < _tableData.length; i++) {
            const item = _tableData[i];
            const _obj = {
              colorName: '',
              sizeName: '',
              imageUrl: '',
              price: 0,
              count: 0,
              colorsSortOrder: item.colorsSortOrder
            };
            CopyData(item, _obj);
            _obj.price = _obj.price / 100;
            _this.tableData.push(_obj);
          }
        }
        console.log('tableData', _this.tableData);
        // _this.computeTableData();
        this.loading = false;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取分组列表
    getMallProductGroup() {
      // this.Api_GET_MallProductGroupQO.SkipCount = (this.Api_GET_MallProductGroupQO.Page - 1) * this.Api_GET_MallProductGroupQO.MaxResultCount;
      this.Api_GET_MallProductGroupQO.StoreId = this.storeId;
      this.Api_GET_MallProductGroupQO.MaxResultCount = 999;
      api_GET_MallProductGroup(this.Api_GET_MallProductGroupQO).then(res => {
        this.productGroup = res.items;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 计算表格数据
    computeTableData() {
      const _this = this;
      this.tableLoading = true;
      // eslint-disable-next-line no-unused-vars
      let _rows = 0;
      if (_this.Api_POST_ProductInput.colors.length > 0) {
        _rows = _this.Api_POST_ProductInput.colors.length;
      }
      if (_this.checkList.length > 0) {
        _rows = _this.checkList.length;
      }
      // 颜色和尺码都有选择的话，表格的行数是他们相乘的数
      if (_this.Api_POST_ProductInput.colors.length > 0 && this.checkList.length > 0) {
        _rows = _this.Api_POST_ProductInput.colors.length * this.checkList.length;
      }
      this.tableData = [];
      for (let i = 0; i < _rows; i++) {
        const _inventories = {
          colorName: '',
          sizeName: '',
          imageUrl: '',
          price: 0,
          count: 0
        };
        // 既选择颜色，又选择尺码,尺码只选了 一个
        if (this.Api_POST_ProductInput.colors.length > 0 && this.checkList.length === 1) {
          _inventories.colorName = this.Api_POST_ProductInput.colors[i].name;
          _inventories.sizeName = this.checkList[0];
        }
        // 既选择颜色，又选择尺码,尺码只选了 多个
        if (this.Api_POST_ProductInput.colors.length > 0 && this.checkList.length > 1) {
          // 取整
          const _colorIndex = Math.floor(i / this.checkList.length);
          _inventories.colorName = this.Api_POST_ProductInput.colors[_colorIndex].name;
          // 取余
          const _sizeIndex = i % this.checkList.length;
          _inventories.sizeName = this.checkList[_sizeIndex];
        }
        // 只选颜色
        if (this.Api_POST_ProductInput.colors.length > 0 && this.checkList.length === 0) {
          _inventories.colorName = this.Api_POST_ProductInput.colors[i].name;
        }
        // 只选规格
        if (this.Api_POST_ProductInput.colors.length === 0 && this.checkList.length > 0) {
          _inventories.sizeName = this.checkList[i];
        }
        this.tableData.push(_inventories);
      }
      this.tableLoading = false;
    },
    // 获取店铺的尺码列表（以最后更新的为准）
    getMallProductProductSizes() {
      api_GET_MallProductProductSizes({ IncludeStatus: true }).then(res => {
        for (let i = 0; i < res.items.length; i++) {
          const item = res.items[i];
          const _obj = {
            name: item,
            isSelected: false
          };
          this.Api_POST_ProductInput.sizes.push(_obj);
        }
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 新增商品属性
    addProperties() {
      if (this.Api_POST_ProductInput.properties.length >= 10) {
        this.$message({ type: 'warning', message: '最多可以设置10个商品属性' });
        return;
      }
      const _obj = {
        name: '',
        value: '',
        sortOrder: this.Api_POST_ProductInput.properties.length
      };
      this.Api_POST_ProductInput.properties.push(_obj);
    },
    // 新增颜色属性
    addColors() {
      if (this.Api_POST_ProductInput.colors.length >= 10) {
        this.$message({ type: 'warning', message: '最多可以设置10个颜色属性' });
        return;
      }
      this.tableLoading = true;
      const _obj = {
        name: '',
        comment: '',
        sortOrder: this.Api_POST_ProductInput.colors.length
      };
      this.Api_POST_ProductInput.colors.push(_obj);
      if (this.checkList.length > 0) {
        if (this.Api_POST_ProductInput.colors.length !== 1) {
          for (let i = 0; i < this.checkList.length; i++) {
            const _sizeName = this.checkList[i];
            const _inventories = {
              colorName: '',
              sizeName: _sizeName,
              imageUrl: '',
              price: 0,
              count: 0,
              colorsSortOrder: this.Api_POST_ProductInput.colors.length - 1
            };
            // _inventories.sizeName = this.checkList[i];
            this.tableData.push(_inventories);
          }
        }
      } else {
        this.tableData = this.Api_POST_ProductInput.colors.length === 1 ? [] : this.tableData;
        const _newRow = {
          colorName: '',
          sizeName: '',
          imageUrl: '',
          price: 0,
          count: 0,
          colorsSortOrder: this.Api_POST_ProductInput.colors.length - 1
        };
        this.tableData.push(_newRow);
      }
      this.tableLoading = false;
      // this.computeTableData();
    },
    // 修改商品属性
    changeProperties(row, order) {
      // 判断有没有相同的商品属性，不允许重复
      this.isSamePropertiesName = false;
      for (let i = 0; i < this.Api_POST_ProductInput.properties.length; i++) {
        for (let j = i + 1; j < this.Api_POST_ProductInput.properties.length; j++) {
          if (this.Api_POST_ProductInput.properties[i].name === this.Api_POST_ProductInput.properties[j].name) {
            this.isSamePropertiesName = true;
          }
        }
      }
      if (this.isSamePropertiesName) {
        this.$message({ type: 'warning', message: '已存在相同商品属性,请修改！' });
      }
    },
    // 修改颜色属性
    changeColors(row, order) {
      const _num = this.checkList.length > 0 ? this.checkList.length : 1;
      let _index = _num * order;
      for (let i = 0; i < _num; i++) {
        const item = this.tableData[_index];
        item.colorName = row.name;
        item.colorsSortOrder = row.sortOrder;
        _index = _index + 1;
      }
      // 判断有没有相同的颜色属性，不允许重复
      this.isSameColorName = false;
      for (let i = 0; i < this.Api_POST_ProductInput.colors.length; i++) {
        for (let j = i + 1; j < this.Api_POST_ProductInput.colors.length; j++) {
          if (this.Api_POST_ProductInput.colors[i].name === this.Api_POST_ProductInput.colors[j].name) {
            this.isSameColorName = true;
          }
        }
      }
      if (this.isSameColorName) {
        this.$message({ type: 'warning', message: '已存在相同颜色属性,请修改！' });
      }
    },
    // 新增规格尺码
    addSize() {
      if (this.Api_POST_ProductInput.sizes.length >= 10) {
        this.$message({ type: 'warning', message: '最多可以设置10个尺码规格' });
        return;
      }
      if (this.sizeName) {
        const isSame = this.Api_POST_ProductInput.sizes.some((item) => {
          return item.name === this.sizeName;
        });
        if (isSame) {
          this.$message({ type: 'warning', message: '已存在相同尺码规格！' });
          return;
        }
        const _obj = {
          name: this.sizeName,
          isSelected: false,
          sortOrder: this.Api_POST_ProductInput.sizes.length
        };
        this.Api_POST_ProductInput.sizes.push(_obj);
        this.sizeName = '';
      } else {
        this.$message({ type: 'warning', message: '请输入尺码规格自定义值' });
      }
    },
    // 改变选中的规格尺码
    changeCheckList(arr) {
      this.tableLoading = true;
      console.log(this.Api_POST_ProductInput.sizes);
      console.log(arr);
      const _list = [];
      if (arr.length > 0) {
        const _val = arr[arr.length - 1];
        // 按照尺码列表顺序生成排序得已勾选数组
        for (let i = 0; i < this.Api_POST_ProductInput.sizes.length; i++) {
          const item = this.Api_POST_ProductInput.sizes[i];
          for (let j = 0; j < arr.length; j++) {
            const jtem = arr[j];
            if (item.name === jtem) {
              _list.push(jtem);
            }
          }
        }
        // 按照已勾选且排序后的列表获取下标
        for (let h = 0; h < _list.length; h++) {
          const htem = _list[h];
          if (htem === _val) {
            this.indexNum = h;
          }
        }
        console.log(this.indexNum);

        // 旧的选中数组大于新的数组的话，说明是取消选中尺码
        if (this.oldCheckList.length > _list.length) {
          this.tableData = this.tableData.filter(item => _list.indexOf(item.sizeName) > -1);
        } else {
          if (this.Api_POST_ProductInput.colors.length > 0) {
            // 只选了一个尺码的情况
            if (_list.length === 1) {
              for (let i = 0; i < this.tableData.length; i++) {
                const item = this.tableData[i];
                item.sizeName = _val;
              }
            } else {
              for (let k = 0; k < this.Api_POST_ProductInput.colors.length; k++) {
                const ktem = this.Api_POST_ProductInput.colors[k];
                const _inventories = {
                  colorName: ktem.name,
                  sizeName: _val,
                  colorsSortOrder: ktem.sortOrder,
                  imageUrl: '',
                  price: 0,
                  count: 0
                };
                // 插入数据
                this.tableData.splice(this.indexNum + k * _list.length, 0, _inventories);
              }
            }
          } else {
            this.tableData = [];
            for (let k = 0; k < _list.length; k++) {
              const ktem = _list[k];
              const _inventories = {
                colorName: '',
                sizeName: ktem,
                imageUrl: '',
                price: 0,
                count: 0
              };
              this.tableData.push(_inventories);
            }
          }
        }
      } else {
        if (this.Api_POST_ProductInput.colors.length === 0) {
          this.tableData = [];
        } else {
          for (let i = 0; i < this.tableData.length; i++) {
            const item = this.tableData[i];
            item.sizeName = '';
          }
        }
      }
      this.oldCheckList = _list;
      this.tableLoading = false;
      // console.log(this.tableData);
    },
    // 商品属性排序
    setSortOrderProperties(index, type) {
      if (type === 'down') {
        // 移动颜色数组
        const _previewList = this.Api_POST_ProductInput.properties;
        if (_previewList.length - 1 === index) return;
        const _spliceItem = _previewList.splice(index, 1);
        _previewList.splice(index + 1, 0, _spliceItem[0]);
      } else {
        // 移动颜色数组
        const _previewList = this.Api_POST_ProductInput.properties;
        if (index === 0) return;
        const _spliceItem = _previewList.splice(index, 1);
        _previewList.splice(index - 1, 0, _spliceItem[0]);
      }
    },
    // 商品属性排序
    setSortOrder(row, index, type) {
      if (type === 'down') {
        // 移动颜色数组
        const _previewList = this.Api_POST_ProductInput.colors;
        if (_previewList.length - 1 === index) return;
        const _spliceItem = _previewList.splice(index, 1);
        _previewList.splice(index + 1, 0, _spliceItem[0]);

        // 移动表格内容
        const _offset = this.checkList.length > 0 ? this.checkList.length : 1;
        const _newArr = this.tableData.splice(index * _offset, _offset);
        for (let i = 0; i < _newArr.length; i++) {
          const item = _newArr[i];
          this.tableData.splice(_offset * (index + 1) + i, 0, item);
        }
      } else {
        // 移动颜色数组
        const _previewList = this.Api_POST_ProductInput.colors;
        if (index === 0) return;
        const _spliceItem = _previewList.splice(index, 1);
        _previewList.splice(index - 1, 0, _spliceItem[0]);

        // 移动表格内容
        const _offset = this.checkList.length > 0 ? this.checkList.length : 1;
        const _newArr = this.tableData.splice(index * _offset, _offset);
        for (let i = 0; i < _newArr.length; i++) {
          const item = _newArr[i];
          this.tableData.splice(_offset * (index - 1) + i, 0, item);
        }
      }
    },
    deletProperties(index) {
      this.Api_POST_ProductInput.properties.splice(index, 1);
    },
    deletColors(row, index) {
      this.Api_POST_ProductInput.colors.splice(index, 1);
      this.tableData = this.tableData.filter(item => item.colorsSortOrder !== row.sortOrder);
      // 清空颜色后初始化配置
      if (this.tableData.length === 0) {
        this.checkList = [];
        this.oldCheckList = [];
        this.colorsSortOrder = 0;
      }
      // this.computeTableData();
    },
    // 编辑尺码
    editSize(item, index) {
      this.sizeIndex = index;
      this.oldSizeName = item.name;
      this.dialogVisible = true;
      this.editSizeFrom = JSON.parse(JSON.stringify(item));
    },
    saveSize() {
      const isSaveSize = this.Api_POST_ProductInput.sizes.some((item) => {
        return item.name === this.editSizeFrom.name;
      });
      if (isSaveSize) {
        this.$message({ type: 'warning', message: '已存在相同尺码规格！' });
        return;
      }
      this.Api_POST_ProductInput.sizes[this.sizeIndex].name = this.editSizeFrom.name;
      for (let i = 0; i < this.checkList.length; i++) {
        if (this.checkList[i] === this.oldSizeName) {
          this.checkList[i] = this.editSizeFrom.name;
        }
      }
      for (let i = 0; i < this.tableData.length; i++) {
        const item = this.tableData[i];
        if (item.sizeName === this.oldSizeName) {
          item.sizeName = this.editSizeFrom.name;
        }
      }
      this.dialogVisible = false;
    },
    deletSize(row, index) {
      const _data = this.tableData.filter(item => item.sizeName !== row.name);
      if (_data.length > 0) {
        this.tableData = _data;
      } else {
        for (let i = 0; i < this.tableData.length; i++) {
          const item = this.tableData[i];
          item.sizeName = '';
        }
      }
      this.Api_POST_ProductInput.sizes.splice(index, 1);
      this.checkList = this.checkList.filter(item => item !== row.name);
      if (this.checkList.length === 0 && this.Api_POST_ProductInput.colors.length === 0) {
        this.tableData = [];
      }
    },
    // 新增/修改
    saveGoods() {
      this.isRedBorder_properties = false;
      for (let i = 0; i < this.Api_POST_ProductInput.properties.length; i++) {
        const item = this.Api_POST_ProductInput.properties[i];
        if (item.name === '' || item.value === '') {
          this.isRedBorder_properties = true;
        }
      }
      if (this.isRedBorder_properties) {
        this.$message({ type: 'warning', message: '商品属性不能为空！' });
        return;
      }

      this.isRedBorder_colors = false;
      for (let i = 0; i < this.Api_POST_ProductInput.colors.length; i++) {
        const item = this.Api_POST_ProductInput.colors[i];
        if (item.name === '') {
          this.isRedBorder_colors = true;
        }
      }
      if (!this.Api_POST_ProductInput.name) {
        this.$message({ type: 'warning', message: '商品题名不能为空！' });
        return;
      }
      if (!this.Api_POST_ProductInput.productGroupId) {
        this.$message({ type: 'warning', message: '请选择商品分组！' });
        return;
      }
      if (this.Api_POST_ProductInput.images.length === 0) {
        this.$message({ type: 'warning', message: '商品主图不能为空！' });
        return;
      }
      if (this.isRedBorder_colors) {
        this.$message({ type: 'warning', message: '颜色属性不能为空！' });
        return;
      }

      if (this.isSamePropertiesName) {
        this.$message({ type: 'warning', message: '已存在相同商品属性,请修改！' });
        return;
      }
      if (this.isSameColorName) {
        this.$message({ type: 'warning', message: '已存在相同颜色属性,请修改！' });
        return;
      }
      const isPriceNone = this.tableData.some((item) => {
        return item.price === undefined;
      });
      if (isPriceNone) {
        this.$message({ type: 'warning', message: '销售价格不能为空！' });
        return;
      }
      const isCountNone = this.tableData.some((item) => {
        return item.count === undefined;
      });
      if (isCountNone) {
        this.$message({ type: 'warning', message: '库存数量不能为空！' });
        return;
      }
      if (this.Api_POST_ProductInput.description && this.Api_POST_ProductInput.description.length >= 1000) {
        this.$message({ type: 'warning', message: '描述内容过长，请删减！' });
        return;
      }
      for (let i = 0; i < this.Api_POST_ProductInput.sizes.length; i++) {
        const item = this.Api_POST_ProductInput.sizes[i];
        item.isSelected = this.checkList.some((jtem) => {
          return jtem === item.name;
        });
      }

      this.Api_POST_ProductInput.inventories = this.tableData;
      this.Api_POST_ProductInput.storeId = this.storeId;
      // 为表格里相同颜色属性名称的图片赋值，用一样的图片
      if (this.checkList.length > 1) {
        for (let i = 0; i < this.Api_POST_ProductInput.inventories.length; i++) {
          const item = this.Api_POST_ProductInput.inventories[i];
          if (this.Api_POST_ProductInput.inventories[i + 1] && item.colorName === this.Api_POST_ProductInput.inventories[i + 1].colorName) {
            this.Api_POST_ProductInput.inventories[i + 1].imageUrl = item.imageUrl;
          }
        }
      }
      console.log(this.Api_POST_ProductInput);
      this.$refs.Api_POST_ProductInput.validate(valid => {
        if (valid) {
          this.saveGoodsLoading = true;
          if (this.goodsId) {
            const _vo = new SiSTKWMallCreateProductInput();
            CopyData(this.Api_POST_ProductInput, _vo);
            console.log(_vo);
            // 按表单结构复制数据,去除多余属性
            const _images = [];
            for (let i = 0; i < _vo.images.length; i++) {
              const item = _vo.images[i];
              const _obj = {
                imageUrl: item.imageUrl
              };
              _images.push(_obj);
            }

            const _colors = [];
            for (let i = 0; i < _vo.colors.length; i++) {
              const item = _vo.colors[i];
              const _obj = {
                name: item.name,
                comment: item.comment,
                sortOrder: i
              };
              _colors.push(_obj);
            }

            const _sizes = [];
            for (let i = 0; i < _vo.sizes.length; i++) {
              const item = _vo.sizes[i];
              const _obj = {
                name: item.name,
                sortOrder: i,
                isSelected: item.isSelected
              };
              _sizes.push(_obj);
            }

            const _inventories = [];
            for (let i = 0; i < _vo.inventories.length; i++) {
              const item = _vo.inventories[i];
              const _obj = {
                colorName: item.colorName,
                sizeName: item.sizeName,
                imageUrl: item.imageUrl,
                price: item.price ? parseInt(item.price * 100) : 0,
                count: item.count
              };
              _inventories.push(_obj);
            }

            _vo.images = _images;
            _vo.colors = _colors;
            _vo.sizes = _sizes;
            _vo.inventories = _inventories;
            _vo.price = parseInt(_vo.price * 100);

            api_PUT_MallProductId(this.goodsId, _vo).then(res => {
              this.$message({
                // 添加成功！
                message: '更新成功',
                type: 'success'
              });
              this.saveGoodsLoading = false;
              this.goBack();
            }, error => {
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
              this.saveGoodsLoading = false;
            });
          } else {
            for (let i = 0; i < this.Api_POST_ProductInput.inventories.length; i++) {
              const item = this.Api_POST_ProductInput.inventories[i];
              item.price = item.price ? parseInt(item.price * 100) : 0;
            }
            for (let i = 0; i < this.Api_POST_ProductInput.sizes.length; i++) {
              const item = this.Api_POST_ProductInput.sizes[i];
              item.sortOrder = i;
            }
            // this.Api_POST_ProductInput.count = this.Api_POST_ProductInput.count ? parseInt(this.Api_POST_ProductInput.count) : 0;
            this.Api_POST_ProductInput.price = this.Api_POST_ProductInput.price ? parseInt(this.Api_POST_ProductInput.price * 100) : 0;
            if (this.tableData.length > 0) {
              this.Api_POST_ProductInput.count = 0;
              this.Api_POST_ProductInput.price = 0;
            }
            console.log(this.Api_POST_ProductInput);
            api_POST_MallProduct(this.Api_POST_ProductInput).then(res => {
              this.$message({
                // 添加成功！
                message: '添加成功',
                type: 'success'
              });
              this.saveGoodsLoading = false;
              this.goBack();
            }, error => {
              for (let i = 0; i < this.Api_POST_ProductInput.inventories.length; i++) {
                const item = this.Api_POST_ProductInput.inventories[i];
                item.price = item.price ? item.price / 100 : 0;
              }
              this.Api_POST_ProductInput.price = this.Api_POST_ProductInput.price ? this.Api_POST_ProductInput.price / 100 : 0;
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
              this.saveGoodsLoading = false;
            });
          }
        } else {
          return false;
        }
      });
    },
    goBack() {
      this.$router.push({
        name: 'Recycle'
      });
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    openPhotoCropper(index) {
      if (this.Api_POST_ProductInput.images.length > 0) {
        this.imagesIndex = index || index === 0 ? index : this.Api_POST_ProductInput.images.length;
      } else {
        this.imagesIndex = 0;
      }
      const _img = index || index === 0 ? this.Api_POST_ProductInput.images[index].imageUrl : '';
      this.$refs['photoCropper'].open(_img);
    },
    photoCropperSave(fileUrl) {
      if (!this.Api_POST_ProductInput.images[this.imagesIndex]) {
        const _imgs = {
          imageUrl: ''
        };
        this.Api_POST_ProductInput.images.push(_imgs);
      }
      this.$set(this.Api_POST_ProductInput.images[this.imagesIndex], 'imageUrl', fileUrl.tempUrl);
    },
    // 回显
    logoUrlPhotoCropperSave(fileUrl) {
      this.$set(this.Api_POST_ProductInput, 'logoUrl', fileUrl.tempUrl);
    },
    openColorPhotoCropper(imageUrl, index) {
      this.colorIndex = index || 0;
      this.$refs['colorPhotoCropper'].open(imageUrl);
    },
    deleteColorPhotoCropper(index) {
      this.$set(this.tableData[index], 'imageUrl', '');
    },
    colorPhotoCropperSave(fileUrl) {
      this.$set(this.tableData[this.colorIndex], 'imageUrl', fileUrl.tempUrl);
    },
    // 点击图片蒙版关闭
    clickClose(img) {
      this.$nextTick(() => {
        const domImageMask = document.querySelector('.el-image-viewer__mask');
        if (!domImageMask) {
          return;
        }
        domImageMask.addEventListener('click', () => {
          document.querySelector('.el-image-viewer__close').click();
        });
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.checkList.length > 1 && this.Api_POST_ProductInput.colors.length > 0) {
        if (columnIndex === 1 || columnIndex === 3) {
          if (rowIndex % this.checkList.length === 0) {
            return {
              rowspan: this.checkList.length,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    },
    previewImg(img) {
      this.dialogVisible_img = true;
      this.bigImg = img;
    },
    deleteUploadImg(index) {
      this.Api_POST_ProductInput.images.splice(index, 1);
    }
  }
};
</script>
<style>
  .goods_table.gl_table_noBorder.el-table td{
    vertical-align: top;
  }
  .goods_table.gl_table_noBorder.el-table .cell{
    line-height: 46px;
  }
  .goods_table .el-image-viewer__close{
    color: #fff;
  }
  .goods_table.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #f8f8f8;
  }
  .el-input--small.redBorder .el-input__inner
  {
    border-color: #ff4949;
  }
  .input_number_left.el-input-number.is-without-controls .el-input__inner{
    text-align: left;
  }
  .upload_game_img_hover_preview .el-image__preview{
    opacity: 0;
  }
</style>
<style lang="scss" scoped>
  .editGoods{
    padding-bottom: 90px;
  }
  .tip_info_style {
    // padding: 0 10px 0 30px;
    font-size: 14px;
    color: #C0C4CC;
  }
  .personalUserInfo_img_wrap .el-form-item__error {
    padding-left: 10px;
  }
  .box_card{
    padding:30px 20px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.15);
    margin-bottom: 10px;
    .img_box{
      display: inline-block;
      margin-right: 20px;
      margin-bottom: 10px;
    }
  }
  .upload_game_img {
    width: 102px;
    height: 102px;
    line-height: 102px;
    text-align: center;
    font-size: 20px;
    border: 1px dotted #DCDFE6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }
  .upload_game_img.no_pointer {
    cursor: default;
  }
  .upload_game_img.border {
    border: 1px dotted #DCDFE6;
  }
  .upload_game_img:hover {
    border-color: #409eff;
  }
  .upload_game_img .show_img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    vertical-align: top;
  }
  .goods_table .upload_game_img {
    width: 44px;
    height: 53px;
    line-height: 53px;
    text-align: center;
    font-size: 20px;
    border: 1px dotted #DCDFE6;
    border-radius: 4px;
    cursor: auto;
    transition: all 0.2s ease;
    position: relative;
  }
  .goods_table .upload_game_img .show_img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    vertical-align: top;
    cursor: pointer;
  }
  .upload_game_img_hover{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0,0,0,.5);
    transition: opacity .3s;
  }
  // .upload_game_img_hover_preview:hover+.upload_game_img_hover{
  //   opacity: 1;
  // }
  .upload_game_img_hover:hover{
    opacity: 1;
  }
  .upload_game_img_hover span{
    display: none;
    cursor: pointer;
    position: relative;
    font-size: inherit;
    color: inherit;
  }
  .upload_game_img_hover span+span{
    margin-left: 15px;
  }
  .upload_game_img_hover:hover span{
    display: inline-block;
  }
  .goods_table .star{
    color:#ff4949;
    font-size: 13px;
    display: inline-block;
    margin-right: 8px
  }
  .img_box_left{
    max-width: 610px;
    display: inline-block;
    vertical-align: middle;
  }
  .img_box_right{
    display: inline-block;
    vertical-align: top;
    width: 500px;
    margin-left: 20px;
    padding-top: 7px;
    .img_text{
      font-size: 16px;
      color: #999999;
      font-family: PingFang SC, PingFang SC-Regular;
      line-height: 22px;
      margin: 0;
    }
  }
  .form_input_box{
    .form_input{
      width: 180px;
      margin-right: 10px;
    }
  }
  .preview_close,
  .preview_top,
  .preview_bottom {
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    vertical-align: middle;
    color: rgba(0,0,0,0.65);;
  }

  .preview_close:hover,
  .preview_top:hover,
  .preview_bottom:hover {
    color: #5CBDFF;
  }
  .disable_move {
    color: #C0C4CC;
    cursor: not-allowed;
  }
  .checkbox_sizes{
    display: inline-block;
    margin-right: 60px;
  }
  .addColorPhoto{
    display:inline-block;
    margin-left:10px
  }
  .changgeIMgBtn{
    position: absolute;
    height: 25px;
    bottom: -5px;
    color: #fff;
    font-size: 14px;
    line-height: 25px;
    text-align: center;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
  }
</style>
